<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo1</title>
	<!-- 引入 ECharts 文件 -->
    <script src="./js/echarts.js"></script>
</head>
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1200px;height:400px;"></div>
<script type="text/javascript">
	var json = [332,423,423,654,657,344,545]
	var json1 = [0.01,0.02,0.02,0.03]
	var json3 = [23,34,56,67,12,43,54,65,57,76,43,45,44,66]

	//计算展示日期
	var echartData = json;
	var echartLen = echartData.length;
	var date = new Date();
	var currentyear = date.getFullYear();
	var currentmonth = date.getMonth()+1;
	var currentdate = date.getDate();
	var xAxisData = [];

	// var currentyear = 2004;
	// var currentmonth = 3;
	// var currentdate = 4;

	if((currentdate - echartLen) >= 1){
		for (var i = 1; i <= echartLen; i++){
			currentdate--;
            xAxisData.unshift(currentmonth+'\n月\n' + currentdate + '\n日');
        }
	}else{
		currentmonth --;
		if(currentmonth < 0){
			currentmonth = 12;
		}
		for (var i = 1; i <= currentdate; i++){
			currentdate--;
            xAxisData.unshift((currentmonth+1)+'\n月\n' + currentdate + '\n日');
		}
		if(currentmonth == 1 || currentmonth == 3 || currentmonth == 5 || currentmonth == 7 || currentmonth == 8 || currentmonth == 10 || currentmonth == 12){
			var date = 31;
			if (currentmonth < 0) {
				currentmonth = 12;
			}
			for (var i = 1; i <= echartLen-currentdate; i++){
		  		xAxisData.unshift(currentmonth+'\n月\n' + date + '\n日');
		  		date--;
		  	}
		}else if(currentmonth == 4 ||currentmonth == 6 ||currentmonth == 9 || currentmonth == 11){
			var date = 30;
			for (var i = 1; i <= echartLen-currentdate; i++){
		  		xAxisData.unshift(currentmonth+'\n月\n' + date + '\n日');
		  		date--;
		  	}
		}else if(currentmonth == 2){
			if(currentyear%4 == 0){
				var date = 29;
				for (var i = 1; i <= echartLen-currentdate; i++){
			  		xAxisData.unshift(currentmonth+'\n月\n' + date + '\n日');
			  		date--;
			  	}
			}else{
				var date = 28;
				for (var i = 1; i <= echartLen-currentdate; i++){
			  		xAxisData.unshift(currentmonth+'\n月\n' + date + '\n日');
			  		date--;
			  	}
			}
		}
	}
	//console.log(xAxisData);

	//计算辅助数据
	var echartData2 = [];

	for(var i = 0;i<echartData.length;i++){
		var data= 0
		for(var j = 0;j < i; j++){
			data+=echartData[j];
		}
		echartData2.push(data);
	}
	//console.log(echartData2);


	//计算虚线
	var dashedDate={};
	for(var i = 0;i<echartData.length;i++){
		var data = 0;
		var dasheddates = [];
		for(var j=0;j<i;j++){
			data+=echartData[j];
		}
		for(var k=0;k<i-1;k++){
			dasheddates.push('-');
		}
		if(data != 0){
			dasheddates.push(data);
			dasheddates.push(data);
			dashedDate[i] = dasheddates;
		}
	}
	// var dashedList = [];
	// for(var key in dashedDate){
	// 	dashedList[key-1] = 
	// }
	// console.log(dashedList);

	// {
 //        data: [900, 900],
 //        type: 'line',
 //        symbol: 'none',
 //        symbolSize: 20,
 //        lineStyle: {
 //            normal: {
 //                color: '#999',
 //                width: 1,
 //                type: 'dashed'
 //            }
 //        }
 //    },



    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
	    // title: {
	    //     text: '阶梯瀑布图',//主标题文本，支持使用 \n 换行。
	    //     subtext: 'From ExcelHome',//副标题文本，支持使用 \n 换行。
	    //     sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'//副标题文本超链接。
	    // },
	    tooltip : {
	        trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        },
	        //文本标签文字的格式化器
	        formatter: function (params) {
	            var tar;
	            //console.log(params);
	            if (params[1].value != '-') {
	                tar = params[1];
	            }
	            else {
	                tar = params[0];
	            }
	            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
	        }
	    },
	    grid: {
	        left: '3%',//grid 组件离容器左侧的距离。
	        right: '4%',//grid 组件离容器右侧的距离。
	        bottom: '3%',//grid 组件离容器下侧的距离。
	        containLabel: true//grid 区域是否包含坐标轴的刻度标签。
	    },
	    xAxis: {
	        type : 'category',
	        splitLine: {show:false},//类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
	        axisLabel:{
                color:'#999',//刻度标签文字的颜色,默认取 axisLine.lineStyle.color。
                interval:0,//横轴信息全部显示
                // rotate:-90,//-30度角倾斜显示
            },
	        axisLine:{
	        	lineStyle:{
	        		color:'#e3e3e3',//坐标轴线线的颜色。
	        	}
	        },
	        data:xAxisData,
	    },
	    yAxis: {
	        type : 'value',
	        axisLine:{
	        	show: false
	        },
	        axisLabel:{
                 color:'#999'
            },
            splitLine: {
	            show: true,
	            lineStyle: {
	                color: '#e3e3e3',
	                type: 'dashed'
	            }
	        },
	    },
	    series: [
	        {
	            name: '辅助',
	            type: 'bar',
	            stack: '总量',
	            itemStyle: {//折线拐点标志的样式
	                normal: {
	                    barBorderColor: 'rgba(0,0,0,0)',
	                    color: 'rgba(0,0,0,0)',
	                },
	                emphasis: {
	                    barBorderColor: 'rgba(0,0,0,0)',
	                    color: 'rgba(0,0,0,0)',
	                }
	            },
	            data: echartData2
	        },
	        {
	            name: '收入',
	            type: 'bar',
	            stack: '总量',
	            itemStyle: {
	            	normal: {
	                    barBorderColor: 'rgba(0,0,0,0)',
	                    color: '#3aa1ff',
	                },
	            },
	            label: {
	                normal: {
	                    show: true,
	                    position: 'top'
	                }
	            },
	            data: echartData
	        },
	    ]
	};
	for(var key in dashedDate){
		option.series.push({"data": dashedDate[key],"type": 'line',"symbol": 'none',"symbolSize": 20,"lineStyle": {"normal": {"color": '#999',"width": 1,"type": 'dashed'}}})
	}
	console.log(option)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
</body>
</html>